<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫码记录</title>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: black;
        }
    </style>
    <script src="http://8.134.217.134:9001/mark-data/webFramework/axios-0.18.0.js"></script>
    <script src="http://8.134.217.134:9001/mark-data/webPage/markConstants.js"></script>

    <script src="http://8.134.217.134:9001/mark-data/webFramework/vue.js"></script>
    <script src="http://8.134.217.134:9001/mark-data/webFramework/element.js"></script>
    <link rel="stylesheet" href="http://8.134.217.134:9001/mark-data/webFramework/element.css">
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://8.134.217.134:9001/mark-data/webPage/new-mark.html" style="font-size: 30px">商户列表</a></el-menu-item>
        <el-menu-item index="2"><a href="http://8.134.217.134:9001/mark-data/webPage/code-record.html" style="font-size: 30px">扫码记录查询</a></el-menu-item>
    </el-menu>
    <br>
    商户名称:
    <el-input
            placeholder="商户名称查询"
            v-model="markName"
            :style="{ width: '300px' }"
            :clearable="false">
    </el-input>
    备注:
    <el-input
            placeholder="备注查询"
            v-model="remark"
            :style="{ width: '300px' }"
            :clearable="false">
    </el-input>
    <el-button class="spacer" type="text"></el-button>
    扫码起止时间:
    <el-date-picker
            v-model="createTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
    </el-date-picker>
    <el-button class="spacer" type="text"></el-button>
    <el-button type="primary" @click="queryRecord(false)">搜索</el-button>
    <br>
    <br>
    <div class="block">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageStyle"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalItems">
        </el-pagination>
    </div>

    <!--表格-->
    <el-container style="height: 600px; border: 1px solid #eee">
        <el-container>
            <el-header style="text-align: center; font-size: 20px; color: black">扫码记录</el-header>

            <el-main>
                <el-table :data="tableData" border="true">
                    <el-table-column prop="serialNumber" label="序号" style="width: 10px">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="markName" label="商户名称"></el-table-column>
                    <el-table-column prop="remark" label="扫码备注"></el-table-column>
                    <el-table-column prop="createTime" label="扫码时间"></el-table-column>
                    <el-table-column prop="dealList" label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteRecord(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                environment: "http://8.134.217.134:9527",
                markName: "",
                remark: "",

                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示条目数
                totalItems: 400, // 总条目数
                pageStyle: [10, 20, 50, 100],

                tableData: [],
                createTime: [],
            }
        },
        mounted() {
            this.queryRecord(false);
        },
        methods: {
            queryRecord(changePage) {
                if (!changePage) {
                    this.currentPage = 1;
                }
                let markName = this.markName;
                let remark = this.remark;
                let current = this.currentPage;
                let size = this.pageSize;
                let pram = {};
                pram.markName = markName;
                pram.remark = remark;
                pram.current = current;
                pram.size = size;
                // 解析起止时间参数
                let timeLimit = this.createTime;
                if (timeLimit !== null && timeLimit.length > 0) {
                    let startTime = formatDateTime(new Date(timeLimit[0]).getTime()); // 获取开始时间
                    let endTime = formatDateTime(new Date(timeLimit[1]).getTime()); // 获取结束时间
                    pram.createStartTime = startTime;
                    pram.createEntTime = endTime;
                }

                axios.post(this.environment + SCAN_RECORD_LIST, pram,
                    {headers: {'Content-Type': 'application/json'}})
                    .then(response => {
                        this.tableData =  response.data.data.records;
                        this.totalItems = response.data.data.total;
                    }).catch(err => alert(err));
            },
            deleteRecord(recordId) {
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let pram = {};
                    pram.id = recordId;
                    axios.post(this.environment + "/markCode/deleteRecord", pram,
                        {headers: {'Content-Type': 'application/json'}})
                        .then(response => {
                            if (response.data.code === 0) {
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.queryRecord();
                            } else {
                                this.$message({
                                    showClose: true,
                                    type: 'fail',
                                    message: response.data.message
                                });
                            }
                        }).catch(err => alert(err));
                }).catch(() => {
                    this.$message({
                        showClose: true,
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.queryRecord(true);
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.queryRecord(true);
            }
        }
    })

    /**
     * 格式化时间
     */
    function formatDateTime(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = padZero(date.getMonth() + 1);
        const day = padZero(date.getDate());
        const hour = padZero(date.getHours());
        const minute = padZero(date.getMinutes());
        const second = padZero(date.getSeconds());
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }

    function padZero(num) {
        return num < 10 ? `0${num}` : num;
    }
</script>
</html>